<template>
  <div class="container">
    <Breadcrumb :items="['menu.department', '角色管理']" />
    <div class="content">
      <a-table
        :columns="columns"
        :data="form.noData ? [] : data"
        :bordered="form.border"
        :hoverable="form.hover"
        :stripe="form.stripe"
        :loading="form.loading"
        :show-header="form.tableHeader"
        :row-selection="form.checkbox ? rowSelection : undefined"
      >
        <template #columns>
          <a-table-column title="序号" data-index="key" />
          <a-table-column title="角色名称" data-index="name" />
          <a-table-column title="别名" data-index="otherName" />
          <a-table-column title="排序" data-index="sort" />

          <a-table-column title="状态" data-index="status">
            <template #cell>
              <a-space>
                <a-button type="primary">启用</a-button>
                <a-button type="primary" status="danger">禁用</a-button>
              </a-space>
            </template>
          </a-table-column>
          <a-table-column title="创建时间" data-index="time" />
          <a-table-column title="备注" data-index="email" />
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue"
const form = reactive({
  border: true,
  borderCell: false,
  hover: true,
  stripe: true,
  checkbox: true,
  loading: false,
  tableHeader: true,
  noData: false
})

const rowSelection = reactive({
  type: "checkbox",
  showCheckedAll: true
})

const columns = [
  {
    title: "序号",
    dataIndex: "key"
  },
  {
    title: "角色名称",
    dataIndex: "name"
  },
  {
    title: "别名",
    dataIndex: "otherName"
  },
  {
    title: "排序",
    dataIndex: "sort"
  },
  {
    title: "状态",
    dataIndex: "status"
  },
  {
    title: "创建时间",
    dataIndex: "time"
  },
  {
    title: "备注",
    dataIndex: "email"
  }
]

const data = [
  {
    key: "1",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "2",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "3",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "4",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "5",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  }
]
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}
.content {
  margin: 20px;
}
</style>
